<html>
	<head>
	<title>house finder</title>
	<script type="text/javascript">
		function validateNumber (value) {
			// validate the number
			if (!isNumber(value)) {
				alert("Please enter a number.");
			}
		}
		function validateZIPCode (value) {
			if(!isZIPCode(value)){
				alert("Please enter a zipcode");
			}
		}
		function calcPrice () {
			var maxPrice = document.getElementById("income").value * 4;
			alert("you can afford a house that costs up to $" + maxPrice + ".");
		}
		function findHouse (form) {
			var bedrooms = document.getElementById("bedrooms").value;
			var zipCode = document.getElementById("zip").value;
			form.submit();
		}
	</script>
	</head>
	<body>
		<div id="frame">
			<div id="header"> Ready to find a new house?</div>
			<div id="left"> 
				<img src="house.png" alt="house"/>
			</div>
			<form name="orderform" action="..." method="POST">
				<div class="feild">Enter your annual income:
					<input id="income" type="text" size="12"
					onblur="validateNumber(this.value)"/>
				</div>
				<div class="feild">Enter the number of bedrooms:
					<input id="bedrooms" type="text" size="6"
					onblur="validateNumber(this.value)"/>
				</div>
				<div class="feild">Enter your zip code:
					<input id="zip" type="text" size="10"
					onblur="validateZIPCode(this.value)"/>
				</div>
				<input type="button" value="calculate price" 
				onclick="calcPrice();" />
				<input type="button" value="shop for houses" 
				onclick="findHouse(this.form);" />
			</form>
		</div>
	</body>
</html>
